<template>
	<view class="content">
		<cover-image src="../../static/cover.png" style="height: 650upx; width: 700upx;"></cover-image>
		<!-- 表单 -->
		<view class="form">
			<view class="log-form">
				<input class="log-input" v-model="form.username" type="text" placeholder="用户名" />
			</view>
			<view class="log-form">
				<input class="log-input" v-model="form.password" type="text" placeholder="密码" />
			</view>
		</view>
		<view>
			<view class=" btn cu-load bg-green round shadow" :class="isLoad?'loading':'over'" @tap="login" />
		</view>

	</view>
</template>

<script>
	export default {
		onLoad() {
			this.verifyAuthenticity()
		},
		data() {
			return {
				isLoad: false,
				form: {}
			}
		},
		methods: {
			// 判断用户登陆过
			verifyAuthenticity() {
				var userInfo = this.$tool.getStorageSync("userInfo")
				if(userInfo!=null) {
					uni.switchTab({
						url:'../tabBar/index'
					})
				}
			},
			// 登录
			async login() {
				// 表单非空判断
				if (this.$tool.isNotNull(this.form.username) && this.$tool.isNotNull(this.form.password)) {
					this.form.cid = this.$tool.randomString()
					this.isLoad = true
					var res = await this.$request({ // 发送异步请求
						baseURL: this.$tool.serverURL,
						url: 'front/login',
						params: {
							password:this.form.password,
							username:this.form.username
						},
						type: 'get'
					})
					this.isLoad = false
					console.log('res',res)
					if (res.code == 0) { // 登录成功
						this.$tool.setStorageSync("userInfo",res.data) // 存用户到本地缓存
						uni.switchTab({
							url:'../tabBar/index'
						})
					} else { // 登录失败
						uni.showToast({
							title: "账号或密码错误！",
							image: '/static/error.png',
							icon: 'none'
						})
						this.form = {}
					}
				} else {
					uni.showToast({
						title: "账号或密码为空！",
						image: '/static/error.png',
						icon: 'none'
					})
				}
			}
		},
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.form {
		width: 550upx;
	}

	.form input {
		height: 100upx;
		border-bottom: 2px solid #ebf2ee;
	}

	.btn {
		margin-top: 40upx;
		width: 550upx;
	}
</style>
